<template>
  <div class="performance-test">
    <h1>浏览器性能测试页面</h1>
    <section class="animations">
      <h2>动画效果</h2>
      <div class="box" :class="{ animate: isAnimating }"></div>
      <button @click="toggleAnimation">切换动画</button>
    </section>

    <section class="dom-operations">
      <h2>DOM 操作</h2>
      <button @click="addElements">添加元素</button>
      <button @click="removeElements">移除元素</button>
      <div class="elements-container">
        <div v-for="item in elements" :key="item.id" class="element">{{ item.text }}</div>
      </div>
    </section>

    <section class="complex-calculations">
      <h2>复杂计算</h2>
      <button @click="startCalculation">开始计算</button>
      <p>计算结果: {{ calculationResult }}</p>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const isAnimating = ref(false);
const elements = ref([]);
const calculationResult = ref(null);

const toggleAnimation = () => {
  isAnimating.value = !isAnimating.value;
};

const addElements = () => {
  for (let i = 0; i < 1000; i++) {
    elements.value.push({ id: Date.now() + i, text: `Element ${i}` });
  }
};

const removeElements = () => {
  elements.value = [];
};

const startCalculation = () => {
  calculationResult.value = null;
  setTimeout(() => {
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
      result += Math.random();
    }
    calculationResult.value = result.toFixed(2);
  }, 0);
};
</script>

<style scoped>
.performance-test {
  font-family: 'Microsoft YaHei', sans-serif;
  margin: 20px;
}

.animations .box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 2s ease-in-out;
}

.animations .animate {
  transform: rotate(360deg) scale(2);
}

.dom-operations .elements-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dom-operations .element {
  background-color: lightblue;
  padding: 10px;
  border-radius: 5px;
}

.complex-calculations button {
  margin-bottom: 10px;
}
</style>
